<template>
	<view class="container position-relative">
		<view @click="toBack" class="goBack flex justify-center align-center round">
			<view class="cuIcon-back lg text-white"></view>
		</view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" circular="true" :duration="1000"
			indicator-color="#F4F4F4" indicator-active-color="#ED7200">
			<swiper-item v-for="item in albumPicsList">
				<image class="width-sub height-sub" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- <view v-if="goodsInfo.groupStatus" class="flex justify-between align-center" style="height: 120rpx;">
			<view
				class="bg-to-right2 f-grow1 height-sub flex justify-start align-center padding-left-sm padding-right-sm padding-bottom padding-top text-white">
				
				¥{{parseFloat(goodsInfo.groupPrice/100).toFixed(2)}}
				<view class="text-delete text-sm margin-top-xs" style="margin-left: 48rpx;">
					原价¥{{parseFloat(goodsInfo.price/100).toFixed(2)}}
				</view>
			</view>
			<view class="padding-sm bg-F6B7AB height-sub flex justify-between flex-direction">
				<view class="text-EE0979">
					距离结束还剩
				</view>
				<view class="" v-if="goodsInfo.endTimeStamp>0">
					<countdown-timer :time="goodsInfo.endTimeStamp" autoStart>
						<template v-slot="{day, hour, minute, second}">
							<view class="text-white text-xs flex justify-start align-center">
								<view class="bg-EE0979 flex justify-center align-center"
									style="min-width: 32rpx;width: 32rpx;height: 32rpx;border-radius: 4rpx;">
									{{day}}
								</view>
								<view class="margin-left-xs margin-right-xs">
									天
								</view>
								<view class="bg-EE0979 flex justify-center align-center"
									style="min-width: 32rpx;width: 32rpx;height: 32rpx;border-radius: 4rpx;">
									{{hour}}
								</view>

								<view class="margin-left-xs margin-right-xs">
									时
								</view>
								<view class="bg-EE0979 flex justify-center align-center"
									style="min-width: 32rpx;width: 32rpx;height: 32rpx;border-radius: 4rpx;">
									{{minute }}
								</view>
								<view class="margin-left-xs margin-right-xs">
									分
								</view>
								<view class="bg-EE0979 flex justify-center align-center"
									style="min-width: 32rpx;width: 32rpx;height: 32rpx;border-radius: 4rpx;">
									{{second }}
								</view>
							</view>
						</template>
					</countdown-timer>
				</view>
			</view>
		</view> -->
		<view class="margin-sm padding-sm bg-white radius10">
			<view class="flex justify-between align-center">
				<view class="" v-if="goodsInfo.groupStatus">
					<view class="flex justify-center align-center color">
						<text class="text-17 text-bold">¥</text>
						<text class="text-23 text-bold">{{parseFloat(goodsInfo.groupPrice/100).toFixed(2)}} </text>
						<!-- <text class="text-17 text-bold">¥</text>
						<text class="text-23 text-bold">{{parseFloat(goodsInfo.originalPrice/100).toFixed(2)}}</text> -->
					</view>
					<view class="text-delete text-sm text-999 margin-top-xs">
						¥{{parseFloat(goodsInfo.price/100).toFixed(2)}}
					</view>
				</view>
				<view class="" v-else>
					<view class="flex justify-center align-center color">
						<text class="text-17 text-bold">¥</text>
						<text class="text-23 text-bold">{{parseFloat(goodsInfo.price/100).toFixed(2)}} ~</text>
						<text class="text-17 text-bold">¥</text>
						<text class="text-23 text-bold">{{parseFloat(goodsInfo.originalPrice/100).toFixed(2)}}</text>
					</view>
					<view class="text-delete text-sm text-999 margin-top-xs">
						¥{{parseFloat(goodsInfo.originalPrice/100).toFixed(2)}}
					</view>
				</view>
				<!--  #ifdef  MP-WEIXIN-->
				<view @click="onShare" class="flex flex-direction justify-center align-center">
					<view class="cuIcon-share xl"></view>
					<view class="text-xs margin-top-xs">
						分享
					</view>
				</view>
				<!--  #endif -->
				<!--  #ifdef  APP-PLUS-->
				<view @click="tapShare" class="flex flex-direction justify-center align-center">
					<view class="cuIcon-share xl"></view>
					<view class="text-xs margin-top-xs">
						分享
					</view>
				</view>
				<!--  #endif -->
			</view>
			<view class="text-lg text-181818 text-cut-2 margin-top-sm text-bold">
				{{goodsInfo.name}}
			</view>
			<view class="margin-top text-sm text-999 flex justify-start align-center">
				<view class="solid-right padding-right-xs">
					是否安装
				</view>
				<view class="margin-left-xs">
					<text v-if="goodsInfo.installStatus==1">不需要安装</text>
					<text v-else>不需要安装</text>
				</view>
			</view>
		</view>
		<view v-if="goodsInfo.groupStatus"
			class="margin-sm padding-left-sm padding-right-sm padding-bottom bg-white radius10">
			<view class="flex justify-between align-center">
				<view class="text-181818 text-df">
					{{total}}人在拼单，可直接参与
				</view>
				<view class="text-999 margin-sm" @click="modalName = 'ModalGroup'">
					查看全部
					<text class="cuIcon-right text-df"></text>
				</view>
			</view>
			<view class="flex justify-between align-center margin-top-xs" v-for="(item,index) in list" v-if="index<5"
				@click="showSku(1,item)">

				<view class="flex justify-center align-center">
					<image :src="item.orderProductGroupItemList[0]?item.orderProductGroupItemList[0].userIcon:''" mode="" class="cu-avatar text-df round">
					</image>
					<view class="text-15 text-181818 margin-left-sm">
						{{item.orderProductGroupItemList[0]?item.orderProductGroupItemList[0].userNickName:''}}
					</view>
				</view>
				<view class="flex justify-center align-center">
					<view class="text-right">
						<view class="text-sm text-181818">
							还差<text style="color:#F74040 ;">{{item.maxCount - item.memberCount}}人</text>拼成
						</view>
						<view class="text-666 align-center">
							<countdown-timer :time="item.endTimeStamp" autoStart>

								<!-- <template v-slot="{day, hour, minute, second}"> -->
								<!-- <view class="text-sm flex justify-start align-center">
										剩余{{day}}：{{hour}}：{{minute }}：{{second }}
									</view> -->
								<!-- </template> -->
							</countdown-timer>
						</view>
					</view>
					<button class="text-df text-white radius5 margin-left-xs flex justify-center align-center"
						style="background: #F74040;width: 120rpx;height: 60rpx;">去拼团</button>
				</view>
			</view>
		</view>
		<view v-else @click="showSku(1,'')"
			class="margin-sm padding-left-sm padding-right-sm padding-bottom padding-top bg-white radius10">
			<view class="flex justify-between align-center">
				<view class="text-df flex justify-center align-center">
					<view class="text-999">
						规格
					</view>
					<view class="text-181818 margin-left">
						{{selectInfo.difference}}
					</view>
				</view>
				<view class="cuIcon-right lg"></view>
			</view>
			<view class="flex justify-between align-center">
				<view class="text-df flex justify-center align-center">
					<view class="text-999">
						运费
					</view>
					<view class="text-181818 margin-left">
						<text v-if="goodsInfo.courierPrice==0">免运费</text>
						<text v-else>{{parseFloat(goodsInfo.courierPrice/100).toFixed(2)}}</text>

					</view>
				</view>
				<!-- <view class="cuIcon-right lg"></view> -->
			</view>
		</view>
		<view class="margin-left-sm margin-right-sm padding-sm bg-white radius10" v-if="commentTotal">
			<view class="flex justify-between align-center">
				<view class="text-15 text-333">
					评价 ({{commentTotal}})
				</view>
				<view class="flex justify-start align-center color"
					@click="toPage('/filePage/pages/recommend/recommend?id='+productId)">
					<view class="text-sm">
						全部评论
					</view>
					<view class="cuIcon-right lg">

					</view>
				</view>
			</view>
			<view class="flex justify-start margin-top" v-for='(item,index) in commentList' :key='index'>
				<image :src="item.headImg" mode="" class="round" style="width: 60rpx;height: 60rpx;min-width: 60rpx;">
				</image>
				<view class="margin-left-xs">
					<view class="text-df text-999 padding-top-xs">
						{{item.nickName}}
					</view>
					<view class="text-15 text-333 margin-top-sm">
						{{item.content ||'暂无数据'}}
					</view>
					<view class="flex flex-wrap justify-start margin-top">

						<image :src="value" class="margin-top-xs" v-for="(value,i) in item.appendix.split(',')"
							:class="{'margin-left-xs':(index+3)%3!=0}" mode="" style="width: 150rpx;height: 150rpx;">
						</image>

					</view>
					<view class="margin-top-sm text-sm text-999">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center align-center padding">
			<view class="row-line margin-right-sm">

			</view>
			<view class="text-lg text-666">
				商品详情
			</view>
			<view class="row-line margin-left-sm">

			</view>
		</view>
		<hui-parser :html="goodsInfo.detailHtml" />
		<view class="height100"></view>
		<view class="g-d-fooder">
			<view class="cu-bar bg-white tabbar border shop">
				<view class="action color flex flex-direction justify-center align-center"
					@click="toPage('/filePage/pages/nearby-ship/nearby-ship?shopId=' + goodsInfo.shopId)">
					<image :src="baseUrl + '/static/Outlets.png'" mode="" style="width: 38rpx;height: 38rpx;">
					</image>
					<view class="margin-top-xs">
						网点
					</view>
				</view>
				<view @click="toPage('/filePage/pages/cart/cart')"
					class="action flex flex-direction justify-center align-center">
					<image :src="baseUrl + '/static/cart.png'" mode="" style="width: 38rpx;height: 38rpx;">
					</image>
					<view class="margin-top-xs" @click="toPage('/filePage/pages/cart/cart')">
						购物车
					</view>
				</view>
				<view class="btn-group">
					<button @click="showSku(2,goodsInfo)" class="cu-btn bg-to-right2 round shadow-blur">
						{{goodsInfo.groupStatus?'直接购买':'加入购物车'}}</button>
					<button @click="showSku(3,goodsInfo)"
						class="cu-btn bg-to-right round shadow-blur">{{goodsInfo.groupStatus?'发起拼单':'立即订购'}}</button>
				</view>
			</view>
		</view>
		<!--底部 sku 选择弹窗 -->
		<wui-specification :goodsInfo="goodsInfo" btnType="1" :nowBuy="nowBuy" :show="show" @select="selectSku" @close="hideSku">
		</wui-specification>
		<view @click="onShare" v-if="is_share" class="flex justify-end"
			style="background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100000;">
			<image :src="baseUrl + '/static/share3.png'" mode=""
				style="width: 432rpx;height: 280rpx;margin-right: 100rpx;margin-top: 120rpx;"></image>
		</view>
		<view class="cu-modal" :class="modalName == 'ModalAuthor' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 请先授权登录 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="hideModal" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button v-if="canIUseProfile == false" open-type="getUserInfo" @getuserinfo="getUserInfo"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
					<button v-else @tap="getUserInfo" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
		<!-- 拼团列别 -->
		<view class="cu-modal" :class="modalName == 'ModalGroup' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">可参与的拼单</view>
					<view class="action cuIcon-roundclose text-20" @tap="hideModal">

					</view>
				</view>
				<view class="" style="height: 50vh;overflow-y: scroll;">
					<view class="flex justify-between align-center padding-sm" v-for="(item,index) in list"
						@click="showSku(1,item)">

						<view class="flex justify-center align-center">
							<image :src="item.orderProductGroupItemList[0]?item.orderProductGroupItemList[0].userIcon:''" mode=""
								class="cu-avatar text-df round">
							</image>
							<view class="text-15 text-181818 margin-left-sm">
								{{item.orderProductGroupItemList[0]?item.orderProductGroupItemList[0].userNickName:''}}
							</view>
						</view>
						<view class="flex justify-center align-center">
							<view class="text-right">
								<view class="text-sm text-181818">
									还差<text style="color:#F74040 ;">{{item.maxCount - item.memberCount}}人</text>拼成
								</view>
								<view class="text-666 align-center">
									<countdown-timer :time="item.endTimeStamp" autoStart>

										<!-- <template v-slot="{day, hour, minute, second}"> -->
										<!-- <view class="text-sm flex justify-start align-center">
											剩余{{day}}：{{hour}}：{{minute }}：{{second }}
										</view> -->
										<!-- </template> -->
									</countdown-timer>
								</view>
							</view>
							<button class="text-df text-white radius5 margin-left-xs flex justify-center align-center"
								style="background: #F74040;width: 120rpx;height: 60rpx;">去拼团</button>
						</view>
					</view>
					<view class="padding-bottom" v-if="list.length==10">
						仅显示10个可参与的的拼单
					</view>
				</view>

			</view>
		</view>
		<!-- 定位授权 -->
		<view class="cu-modal" :class="modalName == 'ModalAddress' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 请先授权地理定位 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="hideModal" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button @click="getLocal" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName == 'ModalPhone' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 获取用户手机号 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="modalName = null" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				baseUrl: this.$config.baseUrl,
				// 后端返回的商品信息
				goodsInfo: {},
				selectInfo: {
					difference: '请选择规格'
				}, //存放最后选中的商品
				btnType: 1,
				commentList: [],
				commentTotal: 0,
				is_share: false,
				productId: '',
				albumPicsList: [],
				countdown: Number,
				partake: false,
				modalName: null,
				// list: [{
				// 	orderProductGroupItemList: [{
				// 		userIcon: '',
				// 		userNickName: ''
				// 	}]
				// }],
				list: [],
				total: 0,
				groupId: '',
				memberCount: '',
				canIUseProfile:false,
				nowBuy:0
			}
		},
		onLoad(options) {
			if (options.id) {
				// console.log(options)
				// this.id = options.id
				this.productId = options.id
				this.getCommentList()
				this.getInfo()
			}
			if (options.groupId) this.groupId = options.groupId
			if (options.partake) this.partake = options.partake
		},
		onShareAppMessage: function(res) {
			this.is_share = false
			// if (res.from === 'button') {
			// 来自页面内转发按钮
			// console.log(res)
			// }
			return {
				path: '/filePage/pages/goods-detail/goods-detail?partake=true&id=' + this.productId
			}
		},
		onShareTimeline: function() {
			// this.onShare()
			this.is_share = false
			return {
				query: '/filePage/pages/goods-detail/goods-detail?partake=true&id=' + this.productId
			}
		},
		methods: {
			// 分享
			onShare() {
				// if (e) this.id = e0
				
				this.is_share = !this.is_share
			},
			tapShare(e) {
				e.stopPropagation();
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: '/static/default.png',
					title: '佐佑帮小程序',
					miniProgram: {
						id: 'gh_ee4f5c078afc',
						path: `/pages/home/home?code=${uni.getStorageSync('userInfo').recommendCode}`,
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
						console.log(JSON.stringify(ret));
						this.getforward()
					}
				});
			},
			async getCommentList() {
				const data = {
					productId: this.productId
				}
				const [error, rs] = await this.$get(this.$api.commentList, data)
				// console.log(rs)
				if (rs) {
					this.commentList = rs.data.list.splice(0, 3)
					this.commentTotal = rs.data.total
				}
			},
			selectSku(options) { //点击sku弹窗中的加入购物车或结算按钮
				this.show = false
				this.selectInfo = options
				if (this.goodsInfo.groupStatus&&this.btnType == 3 && this.goodsInfo.sku_list.length == 0) {
					this.selectInfo.price = this.goodsInfo.groupPrice
				}
				if (this.goodsInfo.groupStatus) {
					this.toPage('/filePage/pages/confirm-order/confirm-order?buyNowProductInfo=' + JSON.stringify({
							attributes: this.selectInfo.difference,
							buyNum: this.selectInfo.num,
							productId: this.goodsInfo.id,
							skuId: this.selectInfo.id
						}) + '&shopId=' + this.goodsInfo.shopId + '&type=3&groupId=' + this.groupId + '&memberCount=' +
						this.memberCount + '&groupStatus=' + this.goodsInfo.groupStatus + '&nowBuy=' + this.nowBuy)
				} else {
					if (this.btnType == 2) {
						this.addCart()
					} else if (this.btnType == 3) {
						// this.nowPay()
						this.toPage('/filePage/pages/confirm-order/confirm-order?buyNowProductInfo=' + JSON.stringify({
							attributes: this.selectInfo.difference,
							buyNum: this.selectInfo.num,
							productId: this.goodsInfo.id,
							skuId: this.selectInfo.id
						}) + '&shopId=' + this.goodsInfo.shopId + '&type=2')
					}
				}

			},
			showSku(e, item) {
				// console.log(e)
				// console.log(item)
				this.show = true
				this.btnType = e
				if(e==2){
					this.nowBuy =1
				}
				if(e==3){
					this.nowBuy = 0
				}
				if (item) {
					if(item.maxCount){
						this.groupId = item.id
						this.memberCount = item.maxCount
					}else{
						this.memberCount = item.memberCount
					}
					
					
					
				}
			},
			hideSku(e) {
				this.show = false
				this.selectInfo = e
			},
			toBack() {
				if (this.partake) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				} else {
					uni.navigateBack()
				}

			},
			toPage(url) {
				// console.log(url)
				this.$util.openNewPage(url)
			},
			async getInfo() {
				let that = this
				const [err, res] = await this.$get(this.$api.product_detail, {
					id: this.productId
				})
				if (res) {
					this.goodsInfo = res.data
					res.data.albumPicsList.forEach((item) => {
						// console.log(JSON.parse(item).url)
						that.albumPicsList.push(JSON.parse(item).url)
					})
					if (res.data.groupStatus) {
						this.memberCount = res.data.maxCount
						this.groupList()
					}
				}
			},
			async groupList() {
				const [err, res] = await this.$get(this.$api.groupBuy_groupList, {
					productId: this.productId,
					status:1,
					pageNum: 1,
					pageSize: 10
				})
				if (res) {
					this.total = res.data.total
					this.list = res.data.list
					console.log(this.list)
				}
			},
			async addCart() {
				console.log(this.selectInfo)
				const [err, res] = await this.$post(this.$api.car_add, {
					attributes: this.selectInfo.difference,
					buyNum: this.selectInfo.num,
					price: this.selectInfo.price,
					productId: this.goodsInfo.id,
					productImg: this.selectInfo.pic ? this.selectInfo.pic : this.goodsInfo.pic,
					productName: this.goodsInfo.name,
					shopId: this.goodsInfo.shopId,
					shopImg: this.goodsInfo.shopImg,
					shopName: this.goodsInfo.shopName,
					skuId: this.selectInfo.id
				})
				if (res) {
					// console.log(res)
					this.$util.msg('加入购物车成功')
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 1500)
				}
			},
			async getUserInfo() {
				let that = this;
				if (that.canIUseProfile == false) {
					uni.login({
						provider: "weixin",
						success: function(loginRes) {
							console.log(loginRes);
							uni.getUserInfo({
								provider: "weixin",
								success: function(infoRes) {
									console.log(infoRes);
									that.getLogin(
										loginRes.code,
										res.userInfo.nickName,
										res.userInfo.avatarUrl
									);
								},
							});
						},
					});
				} else {
					console.log(1111);
					uni.getUserProfile({
						desc: "Wexin",
						success: function(res) {
							console.log("wx.getUserProfile=>用户允许了授权");
							console.log(res.userInfo);
							// console.log( res.rawData );
							console.log(res.signature);
							console.log(res.encryptedData);
							console.log(res.iv);
							uni.login({
								provider: "weixin",
								success: function(loginRes) {
									console.log(loginRes);
									that.getLogin(
										loginRes.code,
										res.userInfo.nickName,
										res.userInfo.avatarUrl
									);
								},
							});
						},
						fail(rs) {
							console.log(rs);
						},
					});
				}
			},
			getLocal() {
				let that = this;
				this.modalName = null;
				uni.openSetting({
					success: (re) => {
						if (re.authSetting) {
							uni.getLocation({
								type: "gcj02",
								success: function(res) {
									that.latitude = res.latitude;
									that.longitude = res.longitude;
								},
								fail(err) {
									console.log(err);
								},
							});
						}
					},
					fail: (er) => {
						console.log("``````" + JSON.stringify(er));
					},
				});
			},
			async getLogin(code, nickName, avatarUrl) {
				let that = this;
				if (!this.latitude && !this.longitude) {
					this.modalName = "ModalAddress";
				} else {
					uni.showLoading({
						title: "正在登录",
						mask: true,
					});
					const [err, res] = await this.$post(this.$api.loginWX, {
						code: code,
						nickname: nickName,
						headimg: avatarUrl,
						latitude: this.latitude,
						longitude: this.longitude,
					});
					if (res) {
						// console.log(res)
						this.modalName = 'ModalPhone'
						this.session_key = res.data.session_key;
						uni.setStorage({
							key: "session_key",
							data: res.data.session_key,
						});
						uni.setStorage({
							key: "token",
							data: res.data.openid,
						});
						uni.setStorage({
							key: "userId",
							data: res.data.userId,
						});
						this.modalName = null;
						uni.hideLoading();
						this.getUser();
						this.getInfo()
						this.$util.msg(res.message);
					}
				}
			},
			hideModal() {
				this.modalName = null;
			},
			async getUser() {
				const [err, rs] = await this.$get(this.$api.userDetail);
				if (rs) {
					// console.log(rs)
					// this.userInfo = rs.data
					uni.setStorageSync("userInfo", rs.data);
				}
			},
			async getPhoneNumber(e) {
				this.modalName = null;
				console.log(e);
				var iv = e.detail.iv;
				var encryptedData = e.detail.encryptedData;
				var session_key;
				if (uni.getStorageSync("session_key")) {
					session_key = uni.getStorageSync("session_key");
				} else {
					session_key = this.session_key;
				}
				const data = {
					session_key,
					iv,
					encryptedData,
				};
				const [err, rs] = await this.$get(this.$api.getWXPhone, data);
				if (rs) {
					this.$util.msg(rs.message);
					uni.setStorageSync("mobile", rs.data.mobile);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goBack {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 50rpx;
		left: 20rpx;
		z-index: 2;
		background: rgba(0, 0, 0, .5);
	}

	.swiper {
		width: 100vw;
		height: 100vw;
	}

	.solid-right {
		border-right: 2rpx solid;
	}

	.row-line {
		width: 80rpx;
		height: 1rpx;
		background: #B2B2B2;
	}

	.g-d-fooder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.cu-btn {
		color: #fff;
		padding: 40rpx;
	}


	.sku-header {
		margin-left: 32rpx;
	}

	.sku-header__img-wrap {
		width: 192rpx;
		height: 192rpx;
		margin: 24rpx 0;
		background: #f7f8fa;
		border-radius: 8rpx;
		overflow: hidden;
		// image {
		//   width: 100%;
		//   height: 100%;
		// }
	}

	.sku-header__goods-info {
		min-height: 192rpx;
		padding: 24rpx 72rpx 24rpx 16rpx;
	}

	.sku-body {
		width: 100%;

		.scroll-sku {
			width: 100%;
			min-height: 400rpx;
			max-height: 760rpx;
			padding-bottom: 30rpx;
		}
	}

	.sku-group-container {
		margin-left: 32rpx;
		padding: 24rpx 0 4rpx;

		.sku-row {
			margin: 0 6rpx 24rpx 0;

			.sku-row__title {
				padding-bottom: 24rpx;
			}

			.sku-row__item {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 80rpx;
				margin: 0 24rpx 24rpx 0;
				overflow: hidden;
				color: #333;
				background: #f5f5f5;
				font-size: 26rpx;
				height: 64rpx;
				border: 1rpx solid #f5f5f5;
				border-radius: 8rpx;

				&.actived {
					border-color: #fe3a3a;
					color: #fe3a3a;
				}

				&.noactived {
					color: #c8c9cc;
					background-color: #f5f5f5;
					border-color: #f5f5f5;
				}

				.sku-row__item-img {
					z-index: 1;
					width: 24px;
					height: 24px;
					margin: 4px 0 4px 4px;
					object-fit: cover;
					border-radius: 2px;
				}

				.sku-row__item-name {
					z-index: 1;
					padding: 0 16rpx;
				}
			}
		}
	}

	.sku-stepper-container {
		margin-left: 32rpx;
		padding: 24rpx 0;
		min-height: 60rpx;
		margin-right: 40rpx;
	}

	.sku-actions {
		padding: 16rpx 32rpx;

		.button-sku {
			height: 80rpx;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 80rpx;
			border: 0 none;
			outline: 0 none;
			border-radius: 0;
			color: #fff;

			&:first-of-type {
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				background: linear-gradient(to right, #ffd01e, #ff8917);
			}

			&:last-of-type {
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				background: linear-gradient(to right, #ff6034, #ee0a24);
			}
		}
	}

	.sku-close {
		position: absolute;
		z-index: 1;
		color: #969799;
		font-size: 48rpx;
		top: 20rpx;
		right: 20rpx;
	}
</style>
